<template>
    <div>
        <!-- 搜索列表 -->

        <!-- 筛选 -->
        <div class="screen">
            <div>
                <span>搜索名：{{ $route.params.name }}</span>
                <button @click="isScreen ? (isScreen = false) : (isScreen = true)">
                    筛选
                </button>
            </div>
            <div :style="isScreen ? screenStyle : {}">
                <!-- 筛选部分 -->
                待开发
            </div>
        </div>

        <!-- 列表 -->
        <div class="list">
            <ul>
                <li v-for="item in searchList" :key="item.pid">
                    <div>
                        <div @click="$router.push(`/product/details/${item.pid}`)">
                            <img :src="item.cover" />
                            <img :src="item.pic" />
                        </div>
                        <div>
                            <div class="title" @click="$router.push(`/product/details/${item.pid}`)">
                                <h3>{{ item.title }}</h3>
                                <span>{{ item.modul }}</span>
                            </div>
                            <div class="shopping">
                                <span>{{ item.price }}</span>
                                <div>
                                    <!-- i 标签是收藏图标 -->
                                    <i class="el-icon-star-off"></i>
                                    <button @click="$router.push(`/product/details/${item.pid}`)">加入购物车</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <div class="page">
            <div>
                <button>&lt;</button>
            </div>
            <div>
                <button v-for="(item, i) in pageArr" :key="i" @click="changePage(i, item)" :style="i == sub ? changSub: ''">{{item}}</button>
            </div>
            <div>
                <button>&gt;</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchList: [], // 搜索出来的商品列表
            isScreen: false, // 是否显示筛选栏
            searchName: "", // 存储的搜索名称

            sub: 0, // 换页下标
            page: 0, // 页数
            pageCount: 0, // 总页数
            pageArr: [],
            total: 0, // 数据量

            // 筛选栏的样式
            screenStyle: {
                height: "200px"
            },

            changSub: {
                backgroundColor: "#222",
                color: "#fff"
            }
        }
    },
    methods: {
        // 获取搜索列表 { 名称， 页数， 每页数量 }
        getSearchList(title, page, pagesize) {
            this.$http.productApi.searchProduct({ title, page, pagesize }).then(res => {
                if (res.data.code == 200) {
                    console.log(res);
                    if(this.searchName != title) {
                        this.sub = 0;
                    }

                    this.searchList = res.data.data;
                    this.searchName = title;

                    this.page = res.data.page;
                    this.pageCount = Math.ceil(res.data.total / res.data.pagesize);

                    for(let i = 0; i < this.pageCount; i++) {
                        this.pageArr[i] = i + 1;
                    }
                }
            });
        },

        // 页数控制
        changePage(subI, page) {
            this.sub = subI;
            this.getSearchList(this.searchName, page, 12);
        }
    },
    // 监听器
    watch: {
        // 监听路由的变化
        $route: {
            handler(to, from) {
                console.log(to);
                this.getSearchList(to.params.name, 1, 12);
            }
        }
    },
    mounted() {
        this.getSearchList(this.$route.params.name, 1, 12);
    }
}
</script>

<style lang="scss" scoped>
.screen {
    width: 1250px;
    margin: 0 auto 50px;
    padding: 50px 0 20px;
    border-bottom: 1px solid #999;

    >div:first-child {
        display: flex;
        padding: 0 300px;
        justify-content: space-between;

        >button {
            background-color: transparent;
            border: none;
            cursor: pointer;

            &:hover {
                color: #4af;
            }
        }
    }

    >div:last-child {
        transition: 0.3s;
        text-align: center;
        overflow: hidden;
        height: 0;
    }
}

.list {
    width: 1250px;
    margin: 0 auto;

    >ul {
        display: flex;
        flex-wrap: wrap;

        >li {
            width: calc((100% - 70px) / 4);
            margin: 0 15px 15px 0;

            >div {
                transition: 0.3s;

                &:hover {
                    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

                    >div:first-child {
                        >img:first-child {
                            opacity: 0;
                        }

                        >img:last-child {
                            opacity: 1;
                        }
                    }
                }

                >div:first-child {
                    // 测试用的背景色
                    // background-color: #aaa;
                    height: 300px;
                    border-bottom: 1px solid #ddd;
                    position: relative;

                    >img {
                        width: 100%;
                        transition: 0.3s;
                        cursor: pointer;

                        &:last-child {
                            position: absolute;
                            top: 0;
                            left: 0;
                            opacity: 0;
                        }
                    }
                }

                >div:last-child {
                    padding: 0 5px 5px;

                    >.title {
                        cursor: pointer;

                        >h3 {
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        >span {
                            font-size: 12px;
                            display: inline-block;
                            width: 100%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }

                    >.shopping {
                        display: flex;
                        justify-content: space-between;

                        >span {
                            font-weight: bold;
                        }

                        >div {
                            >i {
                                cursor: pointer;

                                &:hover {
                                    color: #4af;
                                }
                            }

                            >button {
                                font-size: 15px;
                                padding: 0 10px;
                                background-color: #000;
                                color: #fff;
                                height: 30px;
                                margin-left: 20px;
                                cursor: pointer;
                                border: none;

                                &:hover {
                                    background-color: #111;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.page {
    display: flex;
    justify-content: center;
    margin: 50px 0;

    > div > button {
        width: 50px;
        height: 50px;
        background-color: #eee;
        border: none;
        margin: 0 10px;
    }
}
</style>